<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<title>资源管理</title>
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<link href="static/iframe/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="static/iframe/bootstrap/bootstrap-table/css/bootstrap-table.min.css"
	rel="stylesheet">

<link href="static/iframe/bootstrap/css/bootstrap-theme.min.css"
	rel="stylesheet">
</head>
<style type="text/css">
.fixed-table-body {
	height: auto;
}

.btn-group-vertical>.btn, .btn-group>.btn {
	height: 30px;
}

a:hover {
	text-decoration: none;
}

#toolbarDiv {
	position: relative;
	bottom: -10px;
}

#toolbar {
	position: relative;
}

.layui-breadcrumb a {
	vertical-align: middle;
}
</style>


<body>
	<div class="x-nav">
		<span class="layui-breadcrumb" style="visibility: visible;"><a>
				<cite>首页<span class="layui-box">&gt;</span></cite>
		</a> <a> <cite>系统管理<span class="layui-box">&gt;</span></cite></a> <a>
				<cite>资源管理</cite>
		</a> </span> <a class="btn btn-sm btn-success"
			style="line-height: 1.6em; margin-top: 2px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="glyphicon glyphicon-refresh" style="line-height: 20px"></i></a>
	</div>
	<div class="x-body">
		<div id="toolbar">
			<div id="toolbarDiv">
				<a href="javascript:;"
					onclick="addResource('添加资源','sys/resource/addPage','640','500')"
					class="btn btn-primary radius btn-sm"><i
					class="glyphicon glyphicon-plus"></i> 添加</a>
			</div>
		</div>
		<table id="resourceTable" style="white-space: nowrap;"
			class="table table-hover" data-toolbar="#toolbar"
			data-show-refresh="true"
			data-content-type="application/x-www-form-urlencoded"
			data-showColumns="true" data-undefined-text=" ">
			<thead>
				<tr class="text-c">
					<th data-width="10%" data-align="center" data-field="id">ID</th>
					<th data-width="10%" data-field="resourceName">资源名称</th>
					<th data-width="10%" data-align="center" data-field="resourceCode">资源Code</th>
					<th data-width="14%" data-align="center" data-field="description">描述</th>
					<th data-width="10%" data-align="center" data-field="url">资源路径</th>
					<th data-width="8%" data-align="center" data-field="type"
						data-formatter="typeFarmat">类型</th>
					<th data-width="8%" data-align="center" data-field="pid">上级编号</th>
					<th data-width="10%" data-align="center" data-field="createTime"
						data-formatter='dateFarmat'>创建时间</th>
					<th data-width="10%" data-align="center" data-field="icon"
						data-formatter="iconFarmat">图标</th>
					<th data-width="10%" data-align="center" data-field="action"
						data-formatter="operation">操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>

	</div>
</body>
<!--请在下方写此页面业务相关的脚本-->
<jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include>
<script type="text/javascript"
	src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap-treeView -->
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-treeview/js/bootstraptable-treeview.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/moment.js"></script>
<script type="text/javascript" src="static/plugins/window/layershow.js"></script>
<!--[if lt IE 10]>
    <script type="text/javascript" src="static/plugins/js/input-placeholder/ieplaceholder.js"></script>
    <![endif]-->
<c:if test="${fn:contains(userSession.resourceList, 'user/update')}">
	<script type="text/javascript">
		$.canEdit = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/delete')}">
	<script type="text/javascript">
		$.canDelete = true;
	</script>
</c:if>
<c:if test="${fn:contains(userSession.resourceList, 'user/add')}">
	<script type="text/javascript">
		$.canInsert = true;
	</script>
</c:if>
<script type="text/javascript">
	$(function() {
		initTable();
	});
	//初始化表格
	function initTable() {
		//先销毁表格  
		$("#resourceTable").bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据  
		$("#resourceTable").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			url : "resource/tableView", //获取数据的Servlet地址  
			dataType : "json",
			treeView : true,
			treeId : 'id',
			treeField : 'resourceName',
			striped : true, //表格显示条纹  
			//search: true, //是否启用查询
			//searchOnEnterKey : true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
			showColumns : true, //显示下拉框勾选要显示的列  
			showRefresh : true, //显示刷新按钮 
			uniqueId : "id", //每一行的唯一标识，一般为主键列
			clickToSelect : false, //是否启用点击选中行
			sidePagination : "server", //表示服务端请求  
			paginationLoop : false,
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "limit",
			icons : {
				refresh : 'glyphicon-repeat',
				toggle : 'glyphicon-list-alt',
				columns : 'glyphicon-list'
			},
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					offset : params.offset,
					limit : params.limit,
					sort : params.sort,
					order : params.order
				}
				return param;
			},
			onLoadError : function() { //加载失败时执行  
				layer.msg("加载数据失败", {
					time : 1500,
					icon : 2
				});
			}
		});
	}
	//操作栏 
	function operation(index, row, value) {
		//value: 所在collumn的当前显示值，
		//row:整个行的数据 ，对象化，可通过.获取
		//表格-操作 - 格式化 
		var str = "&nbsp;";

		//if($.canEdit){
		str += "<a style='text-decoration:none' onClick=updateResource('编辑','user/selectUserById/"
				+ row.id
				+ "','450','480')  title='编辑'  href='javascript:;'  class='ml-5'><i class='glyphicon glyphicon-edit'></i></a>";
		//}
		str += "&nbsp;&nbsp;&nbsp;&nbsp;"
		//if($.canDelete){
		str += "<a title='删除' href='javascript:;' onclick=deleteResource('resource/delete/"
				+ row.id
				+ "') class='ml-5' style='text-decoration:none'><i class='glyphicon glyphicon-trash'></i></a>";
		//}
		return str;
	}

	//格式化icon
	function iconFarmat(value, row, index) {
		var icon = value;
		return '<i style="margin-top:2px;" class="'+icon+'"></i>';
	}

	//格式化时间 
	function dateFarmat(value, row, index) {
		return moment(value).format('YYYY-MM-DD HH:mm:ss');
	}

	//类型 
	function typeFarmat(value, row, index) {
		var str = "";
		if (value == "") {
			str = "菜单";
		}
		if (value == 1) {
			str = "链接";
		}
		if (value == 2) {
			str = "按钮";
		}
		return str;
	}

	//添加资源 
	function addResource(title, url, w, h) {
		layer_show(title, url, w, h);
	}

	//删除 
	function deleteResource(url) {
		layer.confirm('是否删除该资源?', {
			btn : [ '是', '否' ]
		//按钮
		}, function() {
			$.post(url, function(result) {
				//刷新 
				$("#resourceTable").bootstrapTable('refresh');
				//提示消息 
				if (result.flag) {
					layer.msg(result.msg, {
						icon : 1,
						time : 2000
					//提示时间 (默认3秒)
					});
				} else {
					layer.msg(result.msg, {
						icon : 2,
						time : 2000
					});
				}
			})

		});
	}

	function updateResource(obj, id) {
		alert(id);
	}
</script>
</html>